<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .box{
            width: 298px;
            height: 198px;
            border: 1px solid orange;
            margin: 200px auto;
            padding: 25px;
            background: url(line.jpg);
        }

        .box h2{
            font-size: 20px;
            padding: 15px 0;
            border-bottom: 1px solid rebeccapurple;
            margin-bottom: 12px;
        }

        .box ul li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed #cccccc;
            background: url(arr.jpg) no-repeat 5px center;
            /*因为这个li 没有宽度 所以padding 不会撑开盒子*/
            padding-left: 20px;
        }

        .box ul li a{
            color: black;
            font-size: 12px;
            text-decoration: none;
        }

        .box ul li a:hover{
            text-decoration: underline;
        }
    
    </style>

</head>
<body>
    <div class="box">
            <!-- 标题盒子 -->
            <h2>综合案例训练</h2>
            <!-- 列表盒子 -->
            <ul>
                <li><a href="#">大数据开发工程师</a></li>
                <li><a href="#">Java开发工程师</a></li>
                <li><a href="#">web前端开发工程师</a></li>
                <li><a href="#">微信小程序开发</a></li>
            </ul>
    </div>
</body>
</html>